<template>
  <div style="width: 1200px; margin: 20px auto; border: 1px solid #ccc; box-shadow: 1px 1px 15px #ccc">
    <h2 style="border-bottom: 1px solid #e8e8e8; padding: 20px 10px">新建项目</h2>
    <a-row :gutter="16">
      <a-col :span="12" style="border-right: 1px solid #e8e8e8; padding: 40px 20px">
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="项目名称：">
            <a-input v-model:value="formState.name" placeholder="请输入项目名称" />
          </a-form-item>
          <a-form-item label="日期：">
            <a-range-picker v-model:value="formState.date1" placeholder="请选择日期" style="width: 100%" />
          </a-form-item>
          <a-form-item label="查看权限：">
            <a-select v-model:value="formState.region">
              <a-select-option value="1">查看全部任务</a-select-option>
              <a-select-option value="2">查看全部前置任务</a-select-option>
              <a-select-option value="3">查看本人参与任务</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="下载权限：">
            <a-select v-model:value="formState.region">
              <a-select-option value="1">下载全部任务</a-select-option>
              <a-select-option value="2">下载全部前置任务</a-select-option>
              <a-select-option value="3">下载本人参与任务</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="项目描述：">
            <a-textarea v-model:value="formState.desc" placeholder="请输入项目描述" :auto-size="{ minRows: 2, maxRows: 5 }" type="textarea" />
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="12" style="padding: 40px 20px">
        <h2>协同设计项目</h2>
        <div>
          使用该功能推进整个项目。 包括创建项目，组建团队， 分配设计资源（超算、应用虚拟化）， 分配IP/PDK。可以对项目进行任务分解， 分配任务的参与执行人，分配项目资源到每个任务， 配置任务项的前后置关系，制定审批任务等。
          实现项目整体流程的运转管理。
        </div>
      </a-col>
    </a-row>
    <div style="border-top: 1px solid #e8e8e8; padding: 30px 0; text-align: center">
      <a-button type="primary" @click="onSubmit">取消</a-button>
      <a-button style="margin-left: 10px">下一步</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw, UnwrapRef } from "vue"
interface FormState {
  name: string
  region: string | undefined
  date1: any
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}
export default defineComponent({
  setup() {
    const formState: UnwrapRef<FormState> = reactive({
      name: "",
      region: "1",
      date1: undefined,
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    })
    const onSubmit = () => {
      console.log("submit!", toRaw(formState))
    }
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formState,
      onSubmit,
    }
  },
})
</script>
